﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>纯CSS实现的动画效果Animate.css 演示页面</title>
    <!--演示页面的CSS样式-->
    <link rel="stylesheet" href="animate.css">
	<style>
	    #animateTest{
			text-align:center;background:#39c;padding:10px;width:180px;color:#fff;margin:0 auto;
			text-shadow:0 1px 0 rgba(0,0,0,.3);
			background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0),rgba(255,255,255,.1) 60%,rgba(255,255,255,0) 60%);
			background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,0),rgba(255,255,255,.1) 60%,rgba(255,255,255,0) 60%);
			background-image:linear-gradient(-45deg,rgba(255,255,255,0),rgba(255,255,255,.1) 60%,rgba(255,255,255,0) 60%);
			border-radius:5px;border:1px solid #17a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font-weight:bold;
		}
		#animateTest p{margin:0;}
		.butt-small{font-size:0.75em;}
		.butt{background-color:#EEEEEE;
		background-image:-moz-linear-gradient(0% 100% 90deg,#CCCCCC,#EEEEEE);
		border:1px solid #AAAAAA;border-radius:5px 5px 5px 5px;
		box-shadow:0 1px 0 rgba(255,255,255,0.4) inset;color:#333333;
		cursor:pointer;display:inline-block;font-weight:700;
		line-height:1.2em;margin:0.75em 0;padding:0.6em 12px;
		text-decoration:none;text-shadow:0 1px 0 rgba(255,255,255,0.3);
		width:auto;}
	</style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
	$(function(){
		var animateTest = $('#animateTest');
		$("a.butt").each(function(index, element) {
			$(this).click(function(){
				animateTest.removeClass().addClass('animated '+$(this).text()+'');	
			});
		});
	});
    </script>
</head>
<body>
    <div class="content">
        <h2><b>纯CSS实现的动画效果Animate.css</b></h2>
        <h3>Attention seekers</h3>
			<a href="#" class="butt butt-small">flash</a>
			<a href="#" class="butt butt-small">bounce</a>
			<a href="#" class="butt butt-small">shake</a>
			<a href="#" class="butt butt-small">tada</a>
			<h3>淡入效果</h3>
			<a href="#" class="butt butt-small">fadeIn</a>
			<a href="#" class="butt butt-small">fadeInUp</a>
			<a href="#" class="butt butt-small">fadeInDown</a>
			<a href="#" class="butt butt-small">fadeInLeft</a>
			<a href="#" class="butt butt-small">fadeInRight</a>
			<a href="#" class="butt butt-small">fadeInUpBig</a>
			<a href="#" class="butt butt-small">fadeInDownBig</a>
			<a href="#" class="butt butt-small">fadeInLeftBig</a>
			<a href="#" class="butt butt-small">fadeInRightBig</a>
			<h3>淡出效果</h3>
			<a href="#" class="butt butt-small">fadeOut</a>
			<a href="#" class="butt butt-small">fadeOutUp</a>
			<a href="#" class="butt butt-small">fadeOutDown</a>
			<a href="#" class="butt butt-small">fadeOutLeft</a>
			<a href="#" class="butt butt-small">fadeOutRight</a>			
			<a href="#" class="butt butt-small">fadeOutUpBig</a>
			<a href="#" class="butt butt-small">fadeOutDownBig</a>
			<a href="#" class="butt butt-small">fadeOutLeftBig</a>
			<a href="#" class="butt butt-small">fadeOutRightBig</a>
			<br /><br />
			<div class="flash" id="animateTest">
				<p>给力技术</p>
			</div>
			<h3>震动效果</h3>
			<a href="#" class="butt butt-small">bounceIn</a>
			<a href="#" class="butt butt-small">bounceInDown</a>
			<a href="#" class="butt butt-small">bounceInUp</a>
			<a href="#" class="butt butt-small">bounceInLeft</a>
			<a href="#" class="butt butt-small">bounceInRight</a>
            <br />
			<a href="#" class="butt butt-small">bounceOut</a>
			<a href="#" class="butt butt-small">bounceOutDown</a>
			<a href="#" class="butt butt-small">bounceOutUp</a>
			<a href="#" class="butt butt-small">bounceOutLeft</a>
			<a href="#" class="butt butt-small">bounceOutRight</a>
			<h3>旋转效果</h3>
			<a href="#" class="butt butt-small">rotateIn</a>
			<a href="#" class="butt butt-small">rotateInDownLeft</a>
			<a href="#" class="butt butt-small">rotateInDownRight</a>
			<a href="#" class="butt butt-small">rotateInUpLeft</a>
			<a href="#" class="butt butt-small">rotateInUpRight</a>
			<br />
			<a href="#" class="butt butt-small">rotateOut</a>
			<a href="#" class="butt butt-small">rotateOutDownLeft</a>
			<a href="#" class="butt butt-small">rotateOutDownRight</a>
			<a href="#" class="butt butt-small">rotateOutUpLeft</a>
			<a href="#" class="butt butt-small">rotateOutUpRight</a>

        
    </div>
    


</body>
</html>
